<template>
  <div id="app">
    <!-- 轮播图区域 -->
<!--    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="(image, index) in carouselImages" :key="index">
        <img :src="image" alt="轮播图" @click="handleCarouselClick" class="carousel-image"/>
      </el-carousel-item>
    </el-carousel>-->

    <!-- 搜索框 -->
    <div class="search-box-container">
      <el-input
        v-model="queryParams.name"
        placeholder="搜索商品..."
        class="search-box"
        @keyup.enter="getList"
        suffix-icon="el-icon-search"
      ></el-input>
    </div>

    <!-- 分类栏 -->
    <el-tabs v-model="activeTab" class="categories" @tab-click="handleTabClick">
      <el-tab-pane v-for="category in categories" :label="category" :name="category" :key="category"></el-tab-pane>
    </el-tabs>

    <!-- 商品展示区 -->
    <div class="product-display">
      <el-row :gutter="20">
        <el-col :span="6" v-for="product in products" :key="product.id">
          <el-card class="product-card">
            <image-preview :src="product.picture" class="product-image" alt="商品图片"/>
            <div class="product-info">
              <h3>{{ product.name }}</h3>
              <p>{{ product.description }}</p>
              <div>库存: {{ product.quantity }}</div>
              <div>价格: ¥{{ product.price }}</div>
              <div v-if="!product.inCart">
                <el-button type="primary" @click="addToCart(product)">添加到购物车</el-button>
              </div>
              <div v-else>
                <el-input-number v-model="product.cartQuantity" :min="0" :max="product.quantity" @change="updateCartQuantity(product)"></el-input-number>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 提交按钮 -->
    <el-button class="submit-button" type="success" @click="submitCart">
      提交 (总价: ¥{{ totalPrice }})
    </el-button>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
import {listProduct, addCart} from "@/api/shop/shop";

export default {
  name: 'App',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 商品管理表格数据
      productList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        category: null
      },
      searchQuery: '',
      activeTab: '全部',
      carouselImages: [
        /*require('../img/005.png'),
        require('../img/002.png'),
        require('../img/003.png'),
        require('../img/004.png'),*/
        require('../img/005.jpg'),
        require('../img/006.png'),
      ],
      categories: ['全部', '食品', '服饰', '日用', '电子产品' ,'其他'],
      products: [],
      cart: []
    };
  },
  computed: {
    totalPrice() {
      return this.cart.reduce((total, item) => {
        const product = this.products.find(p => p.productId === item.productId); // 使用 productId
        return total + (product.price * item.quantity);
      }, 0);
    }
  },
  watch: {
    'queryParams.name': function(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getList();
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listProduct(this.queryParams).then(response => {
        this.products = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleTabClick(tab) {
      this.queryParams.category = tab.name === '全部' ? null : tab.name;
      this.getList(); // 重新获取产品列表
    },
    addToCart(product) {
      product.inCart = true;
      product.cartQuantity = 1; // 确保添加到购物车时设置为 1
      this.updateCart(product); // 更新购物车
    },
    updateCartQuantity(product) {
      if (product.cartQuantity === 0) {
        product.inCart = false;
        this.cart = this.cart.filter(item => item.productId !== product.productId); // 使用 productId
      } else {
        this.updateCart(product); // 更新购物车
      }
    },
    updateCart(product) {
      const cartItem = this.cart.find(item => item.productId === product.productId); // 使用 productId
      if (cartItem) {
        cartItem.quantity = product.cartQuantity;
      } else {
        this.cart.push({ productId: product.productId, quantity: product.cartQuantity }); // 使用 productId
      }
    },
    submitCart() {
      // 确保购物车不为空
      if (this.cart.length === 0) {
        alert("购物车为空，无法提交！");
        return;
      }

      this.cart.forEach(cartItem => {
        // 查找购物车中每个产品的详细信息
        const product = this.products.find(p => p.productId === cartItem.productId);
        const data = {
          productId: cartItem.productId,
          quantity: cartItem.quantity,
          addTime: new Date(), // 设置添加时间
          unitPrice: product.price, // 单价
          totalPrice: product.price * cartItem.quantity // 总价
        };

        addCart(data).then(response => {
          console.log("购物车项提交成功：", response);
          this.$message({
            message: '商品已成功添加到购物车',
            type: 'success'
          });
        }).catch(error => {
          console.error("购物车项提交失败：", error);
        });
      });

      // 清空购物车或执行其他后续操作
      this.cart = [];
      // 重置产品列表中的商品状态
      this.products.forEach(product => {
        product.inCart = false;
        product.cartQuantity = 0;
      });
    },
    handleCarouselClick(index) {
      console.log('Carousel item clicked', index); // 调试输出

      // 基于索引决定查询的商品
      if (index === 0) {
        this.queryParams.name = '苹果'; // 第一张图片查询苹果
      } else if (index === 1) {
        this.queryParams.name = '书'; // 第二张图片查询书
      }

      // 调用查询方法
      this.getList();
    },
  }
};
</script>

<style>
.carousel-image {
  width: 100%; /* 图片宽度占满整个轮播项 */
  height: 100%; /* 图片高度占满整个轮播项 */
  object-fit: contain; /* 保持图片完整，可能会有空白 */
}

.el-carousel .el-carousel__item {
  height: 60vh; /* 设置轮播项的高度 */
}
/* 在这里添加样式 */
/*.carousel-image {
  width: 100%;
  height: 50vh;
}*/
/* 居中搜索框 */
.search-box-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.search-box {
  width: 500px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: box-shadow 0.3s, width 0.3s;
}

.search-box:focus-within {
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* 聚焦时的阴影效果 */
  width: 550px; /* 聚焦时稍微增加宽度 */
}

/* 分类栏样式 */
.categories {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 商品展示区样式 */
.product-display {
  margin: 20px;
}
.submit-button {
  position: fixed;
  right: 20px;
  bottom: 40px;
}

.product-card {
  height: 350px; /* 固定高度 */
  display: flex;
  flex-direction: column;
}

.product-image {
  height: 120px; /* 调整图片高度 */
  object-fit: cover;
}

.product-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 确保内容均匀分布 */
  overflow: auto; /* 添加滚动条 */
}

.product-info h3, .product-info p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}


</style>
